<template lang="pug">
  .clearfix
    Modal(
      width="680"
      v-model="isShowExportPDFModal"
      title="付款申请单"
      class-name="vertical-center-modal"
    )
      .search-form
        Form.ivu-row.has-rules-item2(ref="formData" :model="formData" :rules="rules" :label-width="140")
          FormItem.form-item.ivu-col.pr-20(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled" :type="item.model == 'amt' ? 'number' : 'text'")
            template(v-if="item.type === 'select'")
              Select(v-if="item.fn" v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable :disabled="item.isDisabled" @on-change="(event, type) => listenCall(item.fn, item.model, event)")
                Option(v-for="(c_item, c_index) in arrListDown[item.options]" :value="c_item.value" :key="c_index" ) {{ c_item.label }}
              Select(v-else v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable :disabled="item.isDisabled")
                Option(v-for="(c_item, c_index) in arrListDown[item.options]" :value="item.model == 'payType' ? c_item.label : c_item.value" :key="c_index" ) {{ c_item.label }}
            template(v-if="item.type === 'datePicker'")
              DatePicker.w-100(v-model="formData[item.model]" placeholder="请选择" type="month" format="yyyy-MM")

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit" :loading="!isCanSubmit") 确定
</template>

<script>
import { SalaryPayableBillApi } from '@/api/SalaryPayableBill.api.js'
import { Common } from '@/utils/common.js'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro.replace('/api', '/')
export default {
  name: '',

  props: {
  },

  computed: {
  },

  components: {
  },

  data () {  
    return {
      isShowExportPDFModal: false,
      formData: {
        customerGUID: null,
        customerName: null,
        salaryMonth: null,
        sendDate: null,
        amt: null,
        remark: null,
      },
      formItem: [
        { type: 'input', label: '公司名称：', placeholder: '请输入公司名称', prop: 'customerName', model: 'customerName', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'input', label: '费用月份：', placeholder: '请输入费用月份', prop: 'salaryMonth', model: 'salaryMonth', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'input', label: '付款日期：', placeholder: '请输入付款日期', prop: 'sendDate', model: 'sendDate', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'input', label: '金额（人民币）：', placeholder: '请输入金额（人民币）', prop: 'amt', model: 'amt', style: 'ivu-col-span-12' },
        { type: 'input', label: '付款说明：', placeholder: '请输入付款说明', prop: 'remark', model: 'remark', style: 'ivu-col-span-12' },
      ],
      rules: {
        amt: [
          { required: true, message: '请输入金额（人民币）' }
        ],
        remark: [
          { required: true, message: '请输入付款说明' }
        ],
      },
      arrListDown: {
      },
      isCanSubmit: true
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, ...values) {
      this[methodsWords](...values)
    },

    cancel () {
      this.isShowExportPDFModal = false
    },

    show (row) {
      this.$refs.formData.resetFields()
      this.isCanSubmit = true
      this.isShowExportPDFModal = true
      this.fileObj = null
      if (row) {
        this.formData.customerGUID = row.customerGUID
        this.formData.customerName = row.customerName
        this.formData.salaryMonth = row.salaryMonth
        this.formData.sendDate = row.sendDate
      }
    },

    // 收款单位改变
    unitNameChange (model, value) {
      console.log('收款单位改变 model: ', model, ', value: ', value)
      var selectedUnit = this.arrListDown.payAccount.find(item => {return item.value == value})
      console.log('selectedUnit: ', selectedUnit)
      this.formData.bankName = selectedUnit.bankName
      this.formData.accountNo = selectedUnit.accountNo
    },
    
    handleSubmit () {
      console.log('this.formData: ', this.formData)
      this.isCanSubmit = false
      this.$refs.formData.validate((valid) => {
        if (valid) {
          console.log('ok')
          SalaryPayableBillApi.exportPayPDF({...this.formData, companyName: this.formData.customerName, companyId: this.formData.customerGUID}).then(res => {
            if (res.status === 200 && res.data.success) {
              console.log('❤ 返回链接: ', baseUrl + res.data.message)
              window.open(baseUrl + res.data.message, '_blank')
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
          this.isShowExportPDFModal = false
        } else {
          this.isCanSubmit = true
        }
      })
    }
  }
}
</script>

<style lang="less" scope>
</style>
